import React from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route
} from "react-router-dom";
import PropTyps from "prop-types";

function RouteWithSubRoutes(route) {
    return (
        <Route
            path={route.path}
            render={(props) => (
                // pass the sub-routes down to keep nesting
                <route.component {...props} routes={route.routes}/>
            )}
        />
    );
}

class RouteConfig extends React.Component {
    render() {
        return (
            <Router>
                <div>
                    <Switch>
                        {this.props.routes.map((route, i) => (
                            <RouteWithSubRoutes key={i} {...route} />
                        ))}
                    </Switch>
                </div>
            </Router>
        );
    }
}

RouteConfig.propTypes = {
    routes: PropTyps.array.isRequired
};
export default RouteConfig;
